<template>
	<view class="my-info">
		<view class="avatar">
			项目经验
		</view>
		<view class="content">
			<view class="myitem" v-for="item,index in projectList" :key="index">
				<van-cell-group>
					<u-cell-item :border-bottom="border" :title-style="style" title="项目名称" :arrow="false">
						<u-input input-align="right" placeholder="项目名称" slot="right-icon" v-model="item.title"
							:clearable="border" :custom-style="inputStyle"></u-input>
					</u-cell-item>
					<u-cell-item :border-bottom="border" :title-style="style" title="项目简介" :arrow="false">
						<u-input v-model="item.content" input-align="right" :type="type" :border="border"
							:selection-start="start" maxlength=500 placeholder="简单介绍项目叭~" />
					</u-cell-item>
					<u-cell-item :border-bottom="border" :title-style="style" title="项目图片" :arrow="false">
						<u-upload :action="action" slot="right-icon" :file-list="fileList" width=120 height="120"
							max-count="1" del-bg-color="#c5bdfe"></u-upload>
					</u-cell-item>



					<view class="listTitle">技术架构</view>
					<view v-for="project,projectIndex in item.jishuList" :key="projectIndex">

						<u-cell-item :border-bottom="border" :title-style="style" title="标题" :arrow="false">
							<u-input input-align="right" slot="right-icon" v-model="project.title" :clearable="border"
								:custom-style="inputStyle"></u-input>
						</u-cell-item>

						<u-cell-item :border-bottom="border" :title-style="style" title="内容" :arrow="false">
							<u-input input-align="right" slot="right-icon" v-model="project.content" :clearable="border"
								:custom-style="inputStyle"></u-input>
						</u-cell-item>
					</view>
					<view class="listTitle">技术难点及亮点</view>
					<view v-for="project,projectIndex in item.nandianList" :key="projectIndex">

						<u-cell-item :border-bottom="border" :title-style="style" title="标题" :arrow="false">
							<u-input input-align="right" slot="right-icon" v-model="project.title" :clearable="border"
								:custom-style="inputStyle"></u-input>
						</u-cell-item>

						<u-cell-item :border-bottom="border" :title-style="style" title="内容" :arrow="false">
							<u-input input-align="right" slot="right-icon" v-model="project.content" :clearable="border"
								:custom-style="inputStyle"></u-input>
						</u-cell-item>
					</view>

					<u-cell-item :border-bottom="border" :title-style="style" title="项目介绍图片" :arrow="false">
					</u-cell-item>

					<u-upload :action="action" :file-list="fileList" del-bg-color="#c5bdfe"></u-upload>

				</van-cell-group>
			</view>
			<button type="default" class="mybutton" @click="addProject()">添加项目</button>
			<button type="default" class="mybutton" @click="delectProject()">减少项目</button>
			<button type="default" class="mybutton" @click="addItem()">添加技术架构</button>
			<button type="default" class="mybutton" @click="addDef()">添加技术难点</button>
			<button type="default" class="mybutton" @click="next()">保存</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				start: 50,
				type: 'textarea',
				height: 210,
				autoHeight: true,
				projectList: [{
						title: "智鱼简历",
						imgUrl: "../../static/fish.jpg",
						content: "致力于打造一款微信简历模板",
						jishuList: [{
								title: "前端技术",
								content: "Vue+ElementUI"
							}, {
								title: "后端技术",
								content: "Vue+ElementUI"
							}

						],
						nandianList: [{
							title: "技术",
							content: "Vue+ElementUI"
						}],
					}

				],
				titleNum: 0,
				style: {
					'font-size': '26rpx',
					'font-weight': 'bold'
				},
				list: []

			}
		},
		methods: {
			onLoad() {

			},
			addProject() {
				this.projectList.push({
					title: "",
					imgUrl: "",
					content: "",
					jishuList: [{
						title: "",
						content: ""
					}],
					nandianList: [{
						title: "",
						content: ""
					}],
				})
				this.titleNum++
				console.log(this.titleNum);
				console.log("添加一条记录");
			},
			addItem() {
				this.projectList[this.titleNum].jishuList.push({
					title: "",
					content: ""
				})
				console.log("添加一条记录");
			},
			delectProject() {
				this.projectList.pop()
				this.titleNum--
				console.log(this.titleNum);
			},
			addDef() {
				this.projectList[this.titleNum].nandianList.push({
					title: "",
					content: ""
				})
				console.log("添加一条记录");
			},
			next() {
				uni.setStorage({
						key: 'project-info',
						data: this.projectList,
						success() {

					uni.getStorage({
						key: 'basic-info',
						success: function(res) {
							uniCloud.callFunction({
								name: "basicInfo",
								data: {
									username: res.data.username,
									position: res.data.position,
									workex: res.data.workex,
									tel: res.data.tel,
									email: res.data.email,
									blog: res.data.blog,
									sex: res.data.sex,
									region: res.data.region,
									endTime: res.data.region,
									id: 21
								},
								success: (res) => {
									console.log(res);
								},
								fail: (err) => {
									console.log(err);
								}
							})
						},
					});
				}
			}),
			uni.navigateTo({
				url:'../home/home'
			})
	},
	}
	}
</script>

<style scoped lang="scss">
	.my-info {
		background: rgba(224, 226, 252, 0.6);
		min-height: 100vh;
		height: auto;
		padding-bottom: 30rpx;
	}

	.inputStyle {
		width: 100%;
		background-color: red;
	}

	.listTitle {
		font-size: 26rpx;
		font-weight: bold;
		color: #928cd6;
		padding-left: 30rpx;
	}

	.avatar {
		height: 100rpx;
		padding: 20px 0;
		font-size: 30rpx;
		color: #928cd6;
		font-weight: 600;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content {
		margin: 0 30rpx;
	}

	.avatar>image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100rpx;
	}

	.myitem {
		background-color: #ffffff;
		width: 100%;
		padding: 18rpx 0;
		border-radius: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 40rpx;
		background-size: 100% 100%;
	}

	.mybutton {
		background-color: #ffffff;
		width: 100%;
		height: 90rpx;
		font-size: 27rpx;
		color: #928cd6;
		border-radius: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
		line-height: 96rpx;
	}

	.myinput {
		background-color: #ffffff;
		width: 80%;
		height: 120rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #928cd6;
		border-radius: 40rpx;
		box-sizing: border-box;
		margin: 50rpx auto;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
		line-height: 96rpx;
	}

	.mybuttonb {
		background-color: #ffffff;
		width: 100%;
		height: 90rpx;
		font-size: 27rpx;
		color: #c65c69;
		border-radius: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
		line-height: 96rpx;
	}
</style>
